<template>
	<view>
		<view class="top_tab">
			<u-tabs :list="list1" :scrollable="false"  lineWidth="30"
			lineColor="#FDCE9A"
			:activeStyle="{
			    color: '#FDCE9A',
			    fontWeight: 'bold',
			    transform: 'scale(1.01)'
			}"
			@change="changeCurr"
			:inactiveStyle="{
			    color: '#DBDBDB',
			    transform: 'scale(1)'
			}"
			itemStyle="padding-left: 15rpx; padding-right: 15rpx;height:60rpx;"></u-tabs>
		</view>
		<view v-if="curr===0">
			<view class="item_bg" v-for="item in 2" :key="item">
				<view style="position: absolute;top: 50rpx;left: 55rpx;">
					<view style="text-align: center;">￥200</view>
					<view class="tip">满1000元可用</view>
				</view>
				
				<view style="position: absolute;top: 18rpx;right: 40rpx;">
					<view style="text-align: center;font-size: 30rpx;color: #8F602C;">商品券</view>
					<view style="color: #fff;font-size: 20rpx;text-align: center;padding-top: 30rpx;">门店指定商品可用</view>
					<view style="color: #fff;font-size: 20rpx;text-align: center;padding-top: 20rpx;">有效期至：2023.11.09</view>
					<view class="btn" @click="gouse">立即使用</view>
				</view>
			</view>
			<view class="item_bg2">
				<view style="position: absolute;top: 50rpx;left: 55rpx;">
					<view style="text-align: center;">￥200</view>
					<view class="tip">满1000元可用</view>
				</view>
				
				<view style="position: absolute;top: 18rpx;right: 40rpx;">
					<view style="text-align: center;font-size: 30rpx;color: #FFFFFF;">商品券</view>
					<view style="color: #CACACA;font-size: 20rpx;text-align: center;padding-top: 30rpx;">门店指定商品可用</view>
					<view style="color: #CACACA;font-size: 20rpx;text-align: center;padding-top: 20rpx;">有效期至：2023.11.09</view>
					<view class="btn">已过期</view>
				</view>
			</view>
		</view>
		<view v-else>
			<view class="item_bg_yhj" v-for="item in 2" :key="item">
				<view style="position: absolute;top: 50rpx;left: 30rpx;color: #253673;">
					<view style="text-align: center;font-size: 50rpx;">1<text style="font-size: 0.5em;">次</text></view>
					<view class="tip2">全类项目可用</view>
				</view>
				
				<view style="position: absolute;top: 28rpx;right: 100rpx;">
					<!-- <view style="text-align: center;font-size: 30rpx;color: #8F602C;">商品券</view> -->
					<view style="color: #9e8920;font-size: 20rpx;text-align: center;padding-top: 30rpx;">线下门店使用</view>
					<view style="color: #9e8920;font-size: 18rpx;text-align: center;padding-top: 20rpx;">有效期至：2023.11.09</view>
					<view class="btn" @click="gouse">立即使用</view>
				</view>
			</view>
			<view class="item_bg2_yhj">
				<view style="position: absolute;top: 50rpx;left: 30rpx;">
					<view style="text-align: center;font-size: 50rpx;color: rgb(187,187,187);">1<text style="font-size: 0.5em;">次</text></view>
					<view class="tip3">项目名称可用</view>
				</view>
				
				<view style="position: absolute;top: 28rpx;right: 100rpx;">
					<view style="color: #CACACA;font-size: 20rpx;text-align: center;padding-top: 30rpx;">线下门店使用</view>
					<view style="color: #CACACA;font-size: 18rpx;text-align: center;padding-top: 20rpx;">有效期至：2023.11.09</view>
					<view class="btn">已过期</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [{
					name: '优惠券',
				}, {
					name: '体验券',
				}],
				curr:0
			};
		},
		methods:{
			changeCurr(e){
				this.curr=e.index
			},
			gouse(){
				uni.navigateTo({
					url:'./kqhx'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.top_tab{
	width: 100%;
	height: 107rpx;
	background: #343334;
	padding: 45rpx 29rpx;
}
.item_bg_yhj{
	margin: 29rpx;
	background: url('../../../static/userinfo/wdkq/yhj1.png') no-repeat;
	background-size: cover;
	width: 685rpx;
	height: 251rpx;
	position: relative;
	.tip{
		width: 212rpx;
		height: 45rpx;
		border-radius: 6rpx;
		border: 1rpx solid #000000;
		font-size: 25rpx;
		color: #000000;
		text-align: center;
		line-height: 45rpx;
		margin-top: 30rpx;
	}
	.btn{
		width: 239rpx;
		height: 55rpx;
		background: url('../../../static/userinfo/wdkq/Rectangle 257.png') no-repeat;
		background-size: cover;
		text-align: center;
		line-height: 55rpx;
		font-size: 20rpx;
		color: #fff;
		margin-top: 17rpx;
		margin-left: 20rpx;
	}
}
.item_bg{
	margin: 29rpx;
	background: url('../../../static/userinfo/wdkq/Group 41.png') no-repeat;
	background-size: cover;
	width: 685rpx;
	height: 221rpx;
	position: relative;
	.tip{
		width: 212rpx;
		height: 45rpx;
		border-radius: 6rpx;
		border: 1rpx solid #000000;
		font-size: 25rpx;
		color: #000000;
		text-align: center;
		line-height: 45rpx;
		margin-top: 30rpx;
	}
	.btn{
		width: 239rpx;
		height: 55rpx;
		background: url('../../../static/userinfo/wdkq/Rectangle 257.png') no-repeat;
		background-size: cover;
		text-align: center;
		line-height: 55rpx;
		font-size: 20rpx;
		color: #fff;
		margin-top: 17rpx;
		margin-left: 20rpx;
	}
}
.tip2{
	width: 212rpx;
	height: 45rpx;
	border-radius: 6rpx;
	border: 1rpx solid #253673;
	font-size: 25rpx;
	color: #FFFFFF;
	text-align: center;
	line-height: 45rpx;
	margin-top: 30rpx;
	color:#253673;
}
.tip3{
	width: 212rpx;
	height: 45rpx;
	border-radius: 6rpx;
	border: 1rpx solid #fff;
	font-size: 25rpx;
	color: #FFFFFF;
	text-align: center;
	line-height: 45rpx;
	margin-top: 30rpx;
	color:rgb(187,187,187)
}
.item_bg2_yhj{
	margin: 29rpx;
	background: url('../../../static/userinfo/wdkq/yhj2.png') no-repeat;
	background-size: cover;
	width: 685rpx;
	height: 251rpx;
	position: relative;
	color: #FFFFFF;
	.tip{
		width: 212rpx;
		height: 45rpx;
		border-radius: 6rpx;
		border: 1rpx solid #FFFFFF;
		font-size: 25rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 45rpx;
		margin-top: 30rpx;
	}
	.btn{
		width: 239rpx;
		height: 55rpx;
		background: rgb(204,204,204);
		border-radius: 100rpx;
		text-align: center;
		line-height: 55rpx;
		font-size: 20rpx;
		color: #fff;
		margin-top: 17rpx;
		margin-left: 20rpx;
	}
}
.item_bg2{
	margin: 29rpx;
	background: url('../../../static/userinfo/wdkq/Group 42.png') no-repeat;
	background-size: cover;
	width: 685rpx;
	height: 221rpx;
	position: relative;
	color: #FFFFFF;
	.tip{
		width: 212rpx;
		height: 45rpx;
		border-radius: 6rpx;
		border: 1rpx solid #FFFFFF;
		font-size: 25rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 45rpx;
		margin-top: 30rpx;
	}
	.btn{
		width: 239rpx;
		height: 55rpx;
		background: #5E5E5E;
		border-radius: 100rpx;
		text-align: center;
		line-height: 55rpx;
		font-size: 20rpx;
		color: #fff;
		margin-top: 17rpx;
		margin-left: 20rpx;
	}
}
</style>
